<template>
  <div class="question">
    <el-tooltip effect="dark" content="问题反馈" placement="bottom">
      <i class="el-icon-question" @click="dialogVisible = true"></i>
    </el-tooltip>
    <el-dialog
      title="问题反馈"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="反馈内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="6"
            placeholder="请描述出问题的详细内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="反馈类型" prop="region">
          <el-select v-model="form.region" placeholder="请选择问题类型">
            <el-option label="功能问题" value="1"></el-option>
            <el-option label="页面问题" value="2"></el-option>
            <el-option label="其他问题" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="this.loading" type="primary" @click="toSubmit()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "question",
  data() {
    let checkRegion = (rule, value, callback) => {
      // if(value == null){
      //   callback(new Error("请选择反馈类型"));
      // }
      if(value > 0 && value < 4){
        callback();
      }
      else {
        callback(new Error("请选择反馈类型"));
      }
      
    }
    return {
      
      dialogVisible: false,
      form: {
        content: "",
      },
      loading: false,
      dialogVisible: false,

      
      
      rules:  {
        content: { required: true, message: '请输入反馈内容', trigger: 'blur' },
        region: [{ validator: checkRegion,trigger: "blur"}]

      }
        
    };
  },
  methods: {
    handleClose(done) {
      this.form = {};
      done();
    },
    // 提交反馈
    toSubmit(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.Submit();
        }
      });
    },
    
    async Submit() {
      console.log(this.form)
      this.loading = true;
      let res = await this.$store.dispatch("QuestionSubmit", {
        content: this.form.content,
        type: parseInt(this.form.region),
      });
      this.loading = false;
      this.dialogVisible = false;
      this.form.content = '';
      this.form.region = null;

      if (!res.success) {
        this.$message({
          message: "反馈失败",
          type: "error",
        });
      } else {
        this.$message({
          message: res.message,
          type: "success",
        });
      }
      this.loading = false;
    },
  },
};
</script>

<style scoped>
.question {
  height: 15px;
  width: 15px;
  /* text-align: center; */
  align-items: center;
  justify-content: center;
  display: flex;
  margin-right: 20px;
  background-color: #f1f3f8;
  border-radius: 50%;
  padding: 5px;
  color: #454d5a;
  cursor: pointer;
}
</style>